import React, { useEffect, useState } from 'react'
import { getlists } from '@/utils/cates'
import { NavBar, Tabs, Badge } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom';
import styles from './index.module.less'
import { UpOutline, DownOutline } from 'antd-mobile-icons'
import Goodslist from '@/comopnents/Goods'
//上拉加载
import { InfiniteScroll, List } from 'antd-mobile'

interface Datatype {
    "brandId": "string",
    "categoryId": "string",
    "isDesc": 0 | string,
    "keywords": "string",
    "sortBy": "string"
}
export default function Index() {
    //数据请求页数
    let [pagess, setpages] = useState(1)
    //数据一起请求条数
    let [limit] = useState(10)
    //路由传参获取
    const [searchParams] = useSearchParams()
    let arr = searchParams.get('id')
    //正序/倒叙
    const [isDesc, setIsdesc] = useState<any>('')
    //按照/价格/销量/等拍讯
    const [sortBy, setSortBy] = useState('')
    //页面数据请求所需数据
    let [datas, setDatas] = useState({
        categoryId: arr,
        isDesc: localStorage.getItem('isdec') ? localStorage.getItem('isdec') : '',
        sortBy: localStorage.getItem('types') ? localStorage.getItem('types') : sortBy
    })
    //商品列表数据
    const [likelist, setList] = useState([])
    //所有商品
    const [totals, setTotal] = useState(0)
    const [isflag, setflag] = useState(false)
    //页面数据请求
    async function getlist(pagess: number, limit: number, datas: {}) {
        let res: resType = await getlists(pagess, limit, datas)
        // console.log(res);
        if (res.code === 20000) {
            // console.log(1100, res.data.rows);
            let rss = [...likelist, ...res.data.rows] as []
            setList(rss)
            setTotal(res.data.total)
            setpages(pagess + 1)
            setTimeout(() => {
                setflag(true)
            }, 3000);
        }

    }
    // 页面一加载调用
    useEffect(() => {
        console.log(111,isDesc);
        localStorage.setItem('isdec','0')
        // setIsdesc(localStorage.setItem('isdec', isDesc))

        getlist(pagess, limit, datas)
    }, [])
    //点击返回按钮返回上一页
    const back = () => window.history.back()
    //是否显示加载更多字样
    const [hasMore, setHasMore] = useState(true)
    //滚动到底部加载使用
    async function loadMore() {
        //节流阀
        if (isflag) {
            setflag(false)
            //获取滚动到底部的数据
            await getlist(pagess, limit, datas)
            //判断是否有更多数据
            setHasMore(totals > likelist.length)
        }
    }
    //销量的排序标志
    // let saleflag = false
    //价格的排序标志
    // const priceflag = false
    let [keys, setkeys] = useState(localStorage.getItem('types'))


    function changeTabs(key: string) {
        localStorage.setItem('types', key)
        console.log(2222,isDesc);
        setkeys(key)

        setList([])

        switch (key) {
            //销量
            case 'sale':

                isDesc ? setIsdesc(0) : setIsdesc(1)
                isDesc ?   localStorage.setItem('isdec', '0'): localStorage.setItem('isdec', '1')

                break;
            case 'price':
                isDesc ? setIsdesc(0) : setIsdesc(1)
                isDesc ?   localStorage.setItem('isdec', '0'): localStorage.setItem('isdec', '1')

                break;
            case '0':
                key = ''
                setIsdesc('')
                setSortBy('')
                break;
            case '':
                key = ''
                setIsdesc('')
                setSortBy('')
                break;

            default:
                setIsdesc('')
                setSortBy('')
                break;
        }
        console.log(3333,isDesc);

        setpages(1)
        setSortBy(key)
        setDatas({
            categoryId: arr,
            isDesc:localStorage.getItem('isdec'),
            sortBy: key
        })
        localStorage.setItem('isdec', isDesc)
        if (sortBy && (likelist.length === 0)) {
            getlist(pagess, limit, datas)
        }
    }

    return (
        <div>
            <div className={styles.tabPosition}>
                <NavBar className={styles.antdNavbar} onBack={back}>乐居</NavBar>
                <div className={styles.tabsheade}>
                    <div onClick={() => changeTabs('')}
                        className={styles.tabstitle}

                    >
                        <div className={
                            keys === '' ? styles.titelColor : ''
                        }>
                            新品
                        </div>
                    </div>
                    <div onClick={() => changeTabs('sale')} className={styles.tabstitle}>
                        <div className={
                            keys === 'sale' ? styles.titelColor : ''
                        } style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                            <div>
                                销量
                            </div>
                            <div className={styles.sortIcon} >
                                <UpOutline color={isDesc ? '' : '#fff'} />
                                <DownOutline color={isDesc ? '#fff' : ''} />
                            </div>
                        </div>
                    </div>
                    <div onClick={() => changeTabs('price')} className={styles.tabstitle}>
                        <div className={
                            keys === 'price' ? styles.titelColor : ''
                        } style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                            <div>
                                价格
                            </div>
                            <div className={styles.sortIcon} >
                                <UpOutline color={isDesc ? '' : '#fff'} />
                                <DownOutline color={isDesc ? '#fff' : ''} />
                            </div>

                        </div>
                    </div>
                    <div onClick={() => changeTabs('0')} className={styles.tabstitle}>
                        <div className={
                            keys === '0' ? styles.titelColor : ''
                        }>

                            筛选
                        </div>
                    </div>
                </div>
                {/* <Tabs onChange={(key: string) => changeTabs(key)} className={styles.admheader}>
                    <Tabs.Tab className={styles.tabrBag} title='新品' key=''></Tabs.Tab>
                    <Tabs.Tab

                        title={
                            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                <div>
                                    销量
                                </div>
                                <div className={styles.sortIcon} >
                                    <UpOutline color={isDesc ? '#ffff' : ''} />
                                    <DownOutline color={isDesc ? '' : '#ffff'} />
                                </div>
                            </div>
                        }
                        key='sale'>  </Tabs.Tab>
                    <Tabs.Tab title={
                        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                            <div>
                                价格
                            </div>
                            <div className={styles.sortIcon} >
                                <UpOutline />
                                <DownOutline />
                            </div>
                        </div>
                    } key='price'> </Tabs.Tab>
                    <Tabs.Tab title='筛选' key='0'> </Tabs.Tab>
                </Tabs> */}
            </div>
            <div className={styles.tabrConten}>
                <Goodslist type={1} likelist={likelist}></Goodslist>
            </div>
            <InfiniteScroll threshold={300} loadMore={loadMore} hasMore={hasMore} />
        </div>
    )
}
